<template>
    <div class="coreTechnology">
        <div class="coreTechnology-top">
            <div class="coreTechnology-top-title">六大核心技术支持</div>
            <div class="coreTechnology-top-bg">人工智能</div>
            <div class="coreTechnology-top-bg1">深度学习</div>
            <div class="coreTechnology-top-bg2">语音克隆</div>
            <div class="coreTechnology-top-bg3">人脸生成</div>
            <div class="coreTechnology-top-bg4">视频理解</div>
            <div class="coreTechnology-top-bg5">智能创作</div>
        </div>
        <div class="coreTechnology-content">

            <div class="coreTechnology-ability">
                <div class="head " style="margin-top:100px">
                    <div class="head-title wow fadeInUp" data-wow-delay=".3s" data-wow-duration="0.4s">三大核心能力</div>
                    <div class="head-details wow fadeInUp" data-wow-delay=".3s" data-wow-duration="0.8s">赋能业务场景</div>
                </div>
                <div class="flex_cen coreTechnology-ability-data">
                    <div class="coreTechnology-ability-data-box">
                        <div class="coreTechnology-ability-data-box-img">
                            <img src="https://static.pdwl.net/jituan/images/hx/icon6.png" alt="">
                        </div>
                        <div class="coreTechnology-ability-data-box-notes">
                            基于注意力机制的视频理解与生成
                        </div>
                        <div class="copy-writing copy-writing1">
                            <div>注意力机制</div>
                            <div>知识图谱</div>
                            <div>语义算法理解</div>
                            <div>视频分类/检测技术</div>
                            <div>视频生成模型</div>
                        </div>
                    </div>
                    <div class="coreTechnology-ability-data-box">
                        <div class="coreTechnology-ability-data-box-img">
                            <img src="https://static.pdwl.net/jituan/images/hx/icon7.png" alt="">
                        </div>
                        <div class="coreTechnology-ability-data-box-notes">
                            基于大模型的智能内容生产
                        </div>
                        <div class="copy-writing copy-writing1">
                            <div>LLM</div>
                            <div>多模态处理</div>
                            <div>语义理解</div>
                            <div>强化学习</div>
                            <div>对话系统</div>
                        </div>
                    </div>
                    <div class="coreTechnology-ability-data-box">
                        <div class="coreTechnology-ability-data-box-img">
                            <img src="https://static.pdwl.net/jituan/images/hx/icon8.png" alt="">
                        </div>
                        <div class="coreTechnology-ability-data-box-notes">
                            基于上下文内容的数字人生成
                        </div>
                        <div class="copy-writing copy-writing1">
                            <div>形象建模</div>
                            <div>实时渲染-离线渲染</div>
                            <div>动作驱动</div>
                            <div>表情驱动</div>
                            <div>语音识别+语音合成</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="head" style="margin-bottom:0">
                <div class="head-title wow fadeInUp" data-wow-delay=".3s" data-wow-duration="0.4s">技术实力</div>
                <div class="head-details wow fadeInUp" data-wow-delay=".3s" data-wow-duration="0.8s">引领科技创新，让创新更有保障
                </div>
            </div>
        </div>
        <div class="coreTechnology-strength">
            <div class="coreTechnology-strength-data flex_cen">
                <div class="coreTechnology-strength-data-list wow bounceIn" v-for="(item, idx) of strengthList" :key="idx"
                    :data-wow-delay='`${idx * 0.2}s`' :data-wow-duration='`${idx * 0.2}s`'
                    :style="{ backgroundImage: `url(${item.baImg})` }">
                    <div class="coreTechnology-strength-data-list-icon">
                        <i :class="`iconfont ${item.icon}`"></i>
                    </div>
                    <div class="coreTechnology-strength-data-list-title">
                        {{ item.title }}
                    </div>
                    <p class="coreTechnology-strength-data-list-details">
                        {{ item.details }}
                    </p>
                </div>
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>
<script>
import Footer from '@/components/footer/index1.vue';
export default {
    components: { Footer },
    data() {
        return {
            strengthList: [
                {
                    baImg: 'https://static.pdwl.net/jituan/images/hx/icon9.png',
                    icon: 'icon-a-ziyuan146',
                    title: '阵容硬核的研发团队',
                    details: '国际知名企业科学家担任首席技术顾问，吸纳汇聚高精尖人才，持续引领技术创新，致力于打造技术层面的核心竞争力。拥有一支技术实力强劲、经验丰富的技术团队，不断吸纳前沿的技术理念和全新思维。'
                },
                {
                    baImg: 'https://static.pdwl.net/jituan/images/hx/icon10.png',
                    icon: 'icon-wendingxingqiang',
                    title: '稳定可控的核心技术',
                    details: '始终将技术创新作为企业发展的核心驱动力，经过多年的技术沉淀和积累，已经形成了完整的、自主可控的技术体系。科技技术创新，拥有多项知识产权，目前已获得发明专利和软件著作权40余项。'
                },
                {
                    baImg: 'https://static.pdwl.net/jituan/images/hx/icon11.png',
                    icon: 'icon-zhenshikekao',
                    title: '可信可靠的产品服务',
                    details: '品达集团始终秉持着合作共赢、诚信为先的合作理念，服务近10万+企业，全国2000+深度合作商，以95%以上客户满意度，良心口碑，立足业界。拥有稳定可控的产品设计、生产和质量体系。'
                }
            ],
        }
    },
}
</script>
<style lang="scss" scoped>
.coreTechnology {
    .coreTechnology-top {
        background-image: url('https://static.pdwl.net/jituan/images/hx/icon2.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        height: 720px;
        width: 100%;
        position: relative;

        &-title {
            position: absolute;
            top: 230px;
            font-size: 80px;
            font-family: Microsoft YaHei-Bold, Microsoft YaHei;
            font-weight: bold;
            color: #fff;
            line-height: 28px;
            letter-spacing: 6px;
            text-shadow: 1px 1px 9px #FF00FF;
            left: 50%;
            transform: translateX(-50%);
        }

        &-bg,
        &-bg1,
        &-bg2,
        &-bg3,
        &-bg4,
        &-bg5 {
            position: absolute;
            background-image: url('https://static.pdwl.net/jituan/images/hx/icon3.png');
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% 100%;
            height: 140px;
            width: 140px;
            font-size: 24px;
            font-family: Microsoft YaHei-Light, Microsoft YaHei;
            font-weight: 300;
            color: #F0ECFC;
            display: flex;
            align-items: center;
            justify-content: center;

        }

        &-bg {
            bottom: 247px;
            left: 7.2%;
            animation: upDown 2s infinite;
            animation-timing-function: ease-out;
            animation-direction: reverse;

            @keyframes upDown {
                0% {
                    transform: translateY(0);
                }

                50% {
                    transform: translateY(12px);
                }

                100% {
                    transform: translateY(0);
                }

            }

        }

        &-bg1 {
            bottom: 71px;
            left: 24.32%;
            animation: upDown 2s infinite;
            animation-timing-function: ease-out;
            animation-direction: reverse;
            animation-delay: .5s;

            @keyframes upDown {
                0% {
                    transform: translateY(0);
                }

                50% {
                    transform: translateY(-8px);
                }

                100% {
                    transform: translateY(0);
                }

            }

        }

        &-bg2 {
            bottom: 141px;
            left: 37.96%;
            animation: upDown 2s infinite;
            animation-timing-function: ease-out;
            animation-direction: reverse;
            animation-delay: .3s;

            @keyframes upDown {
                0% {
                    transform: translateY(0);
                }

                50% {
                    transform: translateY(-6px);
                }

                100% {
                    transform: translateY(0);
                }

            }
        }

        &-bg3 {
            bottom: 71px;
            left: 53.17%;
            animation: upDown 2s infinite;
            animation-timing-function: ease-out;
            animation-direction: reverse;
            animation-delay: .8s;

            @keyframes upDown {
                0% {
                    transform: translateY(0);
                }

                50% {
                    transform: translateY(14px);
                }

                100% {
                    transform: translateY(0);
                }

            }

        }

        &-bg4 {
            bottom: 193px;
            right: 28.22%;
            animation: upDown 2s infinite;
            animation-timing-function: ease-out;
            animation-direction: reverse;
            animation-delay: .1s;

            @keyframes upDown {
                0% {
                    transform: translateY(0);
                }

                50% {
                    transform: translateY(8px);
                }

                100% {
                    transform: translateY(0);
                }

            }

        }

        &-bg5 {
            bottom: 141px;
            right: 14.06%;
            animation: upDown 2s infinite;
            animation-timing-function: ease-out;
            animation-direction: reverse;
            animation-delay: .9s;

            @keyframes upDown {
                0% {
                    transform: translateY(0);
                }

                50% {
                    transform: translateY(10px);
                }

                100% {
                    transform: translateY(0);
                }

            }

        }
    }

    .coreTechnology-content {
        background-image: url('https://static.pdwl.net/jituan/images/hx/icon4.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        height: 1056px;
        width: 100%;
        position: relative;
    }

    .coreTechnology-ability {
        &-data {
            &-box {
                width: 360px;
                text-align: center;
                margin: 0 60px;

                &-img {
                    width: 360px;
                    height: 300px;

                    img {
                        width: 100%;
                        height: 100%;
                        background-size: 100% 100%;
                        cursor: pointer;
                        transform: translateY(0);
                        transition: transform .3s;

                        &:hover {
                            transform: translateY(-10px);
                        }
                    }
                }

                &-notes {
                    padding-top: 20px;
                    background: linear-gradient(90deg, #0170FF 0%,#5EDAA7 70%, #5EDAA7 100%);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    transform: scale(1);
                    font-size: 19px;
                    font-weight: bold;
                    transition: transform .3s;

                    &:hover {
                        transform: scale(1.05);
                    }
                }

            }
        }

    }

    .coreTechnology-strength {
        padding-bottom: 120px;

        &-data {
            width: 100%;
            height: 100%;

            &-list {
                width: 320px;
                height: 240px;
                background-repeat: no-repeat;
                background-position: center;
                background-size: 100% 100%;
                padding: 30px;
                border-radius: 3px;
                margin-left: 30px;
                cursor: pointer;
                transition: all .2s;

                &:first-child {
                    margin-left: 0px;
                }

                &-icon {
                    i {
                        font-size: 44px;
                        font-weight: bold;
                    }
                }

                &-title {
                    font-size: 18px;
                    font-weight: bold;
                    color: #FFFFFF;
                    line-height: 28px;
                    margin: 21px 0 16px;
                }

                &-details {
                    font-size: 14px;
                    font-weight: 400;
                    color: #FFFFFF;
                    line-height: 24px;
                }

                &:hover {
                    transform: scale(1.05);
                }
            }

        }
    }

    .copy-writing {
        width: 200px;
        height: 300px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
            border-radius: 5px;
        align-items: center;
        margin: 42px auto 0;
        div {
            background: linear-gradient(90deg, #000000 0%, rgba(20, 22, 25, 0) 100%);
            border-radius: 6px;
            border: 1px solid;
            border-image: linear-gradient(90deg, rgba(0, 111, 255, 1), rgba(98, 222, 166, 1)) 1 1;
            font-size: 14px;
            font-weight: 400;
            color: #FFFFFF;
            width: 200px;
            height: 44px;
            line-height: 44px;
            text-align: center;
            cursor: pointer;
            transition: all .3s;
            margin: 0;

            &:first-child {
                margin-top: 0;
            }
        }

        div:hover {
            width: 230px;
            height: 50px;
            border-radius: 5px;
            background: linear-gradient(90deg, #006FFF 0%, #62DEA6 100%);
            border-radius: 6px;
            font-size: 18px;
            border: 1px solid;
            line-height: 50px;
            border-image: linear-gradient(90deg, rgba(0, 111, 255, 1), rgba(98, 222, 166, 1)) 1 1;
            margin: 0;

        }
    }
}</style>
